<template>
    <h1 style="text-align: center;">分销海报</h1>
    <div class="content">
        <div class="poster wow">
            <img id="poster" :src="srcPath" alt="点击按钮重新生成海报">
        </div>

        <div class="link wow" data-wow-delay="100ms">
            <input type="text" placeholder="普通输入框" readonly id="url" :value="link">   
            <van-button type="success" @click="btn">点击复制</van-button>
        </div>

        <div class="update wow" data-wow-delay="200ms">
            <van-button type="primary" @click="update">重新生成海报</van-button>
        </div>
    </div>
    <Tabbar />
</template>
<script setup>
    const {proxy} = getCurrentInstance();
    let srcPath = ref('/assets/images/poster-back.png')
    let link = ref('')
    onMounted(()=>{
        start()
    })
    const start = async ()=>{
        var data = {
            id:proxy.$business.value.id,
            mobile:proxy.$business.value.mobile,
            nickname:proxy.$business.value.nickname,
            avater:proxy.$business.value.avatar_text,
        }
        // console.log(proxy.$business.value.avatar_text);
    
        var result = await proxy.$POST({
            url:'/sale/index',
            params:data
        })
        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }
        srcPath.value = 'http://www.fast.com'+ result.data.PathUrl
        link.value = 'http://localhost:5173/#'+result.data.link//后期更改一下
        proxy.$success(
            {
                message:result.msg,
                duration:1000
            }
        )
        return false
    }
    //复制value中的内容
    const btn = ()=>{
        var copyUrl = document.querySelector("#url");//获取输入框的内容
        copyUrl.select('value');//鼠标选择的内容
        document.execCommand('copy');
    }
    const update = async ()=>{
        start()
        proxy.$router.go(0)
    }
</script>

<style scoped>
    @import url('/assets/css/poster.css');
</style>